<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3图片翻转特效</title>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container{border:1px solid red;perspective: 1000;}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper{transform: rotateY(180deg);}
.flip-container,.front, .back{width: 300px;height: 300px;}
/* flip speed goes here */
.flipper{transition: 0.6s;transform-style: preserve-3d;position: relative;}
/* hide back of pane during swap */
.front, .back{backface-visibility: hidden;position: absolute;top: 0;left: 0;}
/* front pane, placed above back */
.front{z-index: 2;}
/* back, initially hidden pane */
.back{transform: rotateY(180deg);}
</style>
</head>
<body>
<!-- <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> -->
<div class="flip-container">
	<div class="flipper">
		<!-- 这里是前面 -->
		<div class="front"><img src="./images/01.jpg" width="300" height="300" alt=""></div>
		<!-- 这里是后面 -->
		<div class="back"><img src="./images/02.jpg" width="300" height="300" alt=""></div>
	</div>
</div>
</body>
</html>